App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();
    app.defineComponent("str-bottom-nav", {
        hidden: function () {
            if (!this.data.show) return;
            this.data.show = false;
            this.domList.btmNavContainer.classList.add("bottom-nav-hidden");
        },
        show: function () {
            if (this.data.show) return;
            this.data.show = true;
            this.domList.btmNavContainer.classList.remove("bottom-nav-hidden");
        },
        getDomObj: function () {
            this.attachDom("footer", "btmNavContainer")
                .attachEvent("btmNavContainer", "click", this.clickHandler, false);
        },
        init: function () {
            var value = this.property.value;
            this.domList.btmNavContainer.dataset.value = value;
        },
        clickHandler: function (ev) {
            var li = Component.getNodeName(ev.target, "LI");
            if (li && li.dataset.action) {
                var value = li.dataset.action,
                    option = this._getOptionByValue(value);
                
                if (!option) return;
                this.domList.btmNavContainer.dataset.value = value;
                this.dispatchCustomEvent("bottomnavclick", {
                    component: this,
                    target: li,
                    action: value,
                    option: option
                });
            }
        },
        _getOptionByValue: function (value) {
            var options = this.data.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) return options[i];
            }
            return null;
        },
        render: function (next) {
            this.computeData();
            this.data.show = true;
            this.fetchAll(["./index.html", "./li.html"], function (textList) {
                this.data.liHTML = textList[1];
                next(this.renderHTML(textList[0].replace("{{liHTML}}", textList[1])))
            })
        },
        computeData: function () {
            var property = this.property;

            this.data.options = htmlTool.getOptions(this.slot);
            property.class = property.class || "";
            property.value = property.value || this.data.options[0].value;
            this._computeIcon(this.data.options, property.value);
            this.data.propertystr = this.createPropertyStr({
                class: property.class
            });
        },
        _computeIcon: function (options, value) {
            for (var i = 0; i < options.length; i++) {
                var option = options[i];
                if (option.value == value) {
                    options[i].icon = options[i].activeicon;
                } else {
                    options[i].icon = options[i].staticicon;
                }
            }
        },
        appendOption: function (value, staticIcon, activeIcon, content, feeback) {
            var option = {
                value: value,
                staticicon: staticIcon,
                activeicon: activeIcon,
                content: content,
                icon: value === this.property.value ? activeIcon : staticIcon
            }, that = this;

            var ul = this.domList.btmNavContainer.querySelector("ul");

            this.insertAdjacentHTML(ul, this.data.liHTML, "beforeend", function () {
                that.data.options.push(option);
                ul.style.setProperty("--liheight", 100 / that.data.options.length + "vw");
                if (typeof feeback === "function") feeback();
            }, { nav: option });
        },
        insertBefore: function (oldValue, value, staticIcon, activeIcon, content, feeback) {
            var oldIndex = this._getIndexByValue(oldValue);
            if (oldIndex === -1) {
                this.appendOption(value, staticIcon, activeIcon, content, feeback);
            }
            else {
                var option = {
                    value: value,
                    staticicon: staticIcon,
                    activeicon: activeIcon,
                    content: content,
                    icon: value === this.property.value ? activeIcon : staticIcon
                }, that = this;

                var ul = this.domList.btmNavContainer.querySelector("ul");
                var li = ul.children[oldIndex];
                this.insertAdjacentHTML(li, this.data.liHTML, "beforebegin", function () {
                    that.data.options.splice(oldIndex, 0, option);
                    ul.style.setProperty("--liheight", 100 / that.data.options.length + "vw");
                    if (typeof feeback === "function") feeback();
                }, { nav: option })
            }
        },
        removeOption: function (value) {
            var index = this._getIndexByValue(value);
            if (index !== -1) {
                var ul = this.domList.btmNavContainer.querySelector("ul"),
                    li = ul.children[index];

                var range = document.createRange();
                range.selectNode(li);
                this.deleteRange(range);
                range.detach();

                this.data.options.splice(index, 1);
                ul.style.setProperty("--liheight", 100 / this.data.options.length + "vw");
            }
        },
        get value() {
            return this.property.value;
        },
        set value(val) {
            if (val === this.property.value) return;
            var options = this.data.options,
                oldValue = this.property.value,
                oldIndex = this._getIndexByValue(oldValue),
                currentIndex = this._getIndexByValue(val),
                prevComponent = this.getComponentById(oldValue),
                currentComponent = this.getComponentById(val);

            if (prevComponent) {
                prevComponent.icon = options[oldIndex].staticicon;
            }
            if (currentComponent) {
                currentComponent.icon = options[currentIndex].activeicon;
            }
            this.property.value = val;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class == value) return;
            this.domList.btmNavContainer.className = value;
            this.property.class = value;
        },
        _getIndexByValue: function (value) {
            var options = this.data.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) return i;
            }
            return -1;
        }
    });
});